<template>
	<div id="chart">
		<!-- <div style="display: none;">{{flag}}</div> -->
	</div>
	<!-- <div id="chart"></div> -->
</template>

<script>
	export default {
		data: function () {
			return {

			}
		},
		props: {
			temp_list: {
				type: Object,
			},
		},
		watch: {
			temp_list () {
				this.highest = Math.max(...this.$props.temp_list.maxList);
				this.lowest = Math.min(...this.$props.temp_list.minList);
				this.myEcharts(this);
			}
		},
		methods:{
			myEcharts (that) {
				// 基于准备好的dom，初始化echarts实例
				var myChart = that.$echarts.init(document.getElementById('chart'));
				// 指定图表的配置项和数据
				var option = {
					// 配置x轴
					xAxis: {
						type:"category",
						show: false, // 不显示x轴
						boundaryGap: false, // 两边不留有空白，即横向撑满盒子
						data: [1,2,3,4,5,6,7], // 有7天的数据
						scale: true
					},
					yAxis: {
						show: false, // 不显示y轴
						scale: true, // y轴自适应，
						type: 'value'
					},
					// 为了能把点显示全，相当于添加padding
					grid: {
						top: '6px', 
						bottom: '6px',
						right: '6px',
						left: '6px',
					},
					// 传入温度数据
					series: [
						{
							name: '最高温度',
							type: 'line',
							data: that.$props.temp_list.maxList,
							lineStyle: {
								normal: {
									color: "#fcc370",
									width: 2,
									type: "solid",
									
								}
							},
							itemStyle: {
								color: "#fcc370",
								borderColor: "#fcc370",
								borderType: "solid",
								borderWidth: 3
							}
							
						},
						{
							name: '最低温度',
							type: 'line',
							data: that.$props.temp_list.minList,
							lineStyle: {
								normal: {
									color: "#94ccf9",
									width: 2,
									type: "solid",
								}
							},
							itemStyle: {
								color: "#94ccf9",
								borderColor: "#94ccf9",
								borderType: "solid",
								borderWidth: 3
							}
						},
					]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			}
		},
	}
</script>

<style>
</style>
